<template>
	<view class="box">
		<!-- 地址 -->
		<view class="address item">
			<text class="iconfont icon-xinbaniconshangchuan-"></text>
			成都市武侯区
			<text class="item_right iconfont icon-dian"></text>
			<text class="item_right bianji">编辑</text>
			<text class="item_right shuxian">|</text>
		</view>

		<!-- 商品 -->
		<view class="item shopping" v-for="(item,index) in shoppingCartList" :key="index">
			<view class="item_left">
				<checkbox value="cb" @click="check(index)" :checked="item.state" />
			</view>
			<view class="item_center">
				<image :src="item.img"></image>
			</view>
			<view class="item_right">
				<view class="title"><text class="caoshi">京东超市</text>{{item.good_name}}</view>
				<view class="sku">{{item.sku}}</view>
				<view class="priceAndNumber">
					<text class="price">￥<text>{{item.price}}</text>{{item.point}}</text>
					<view class="number">
						<button type="default" size="mini" class="jian" plain @click="down(index)"
							:disabled="item.num <= 1">-</button>
						<input type="number" v-model="item.num" @input="change(index)" />
						<button type="default" size="mini" class="jia" plain @click="add(index)">+</button>
					</view>
				</view>
			</view>
			<view class="clear">
				<text @click="clear(index)">删除</text>
			</view>
		</view>

		<!-- 结算 -->
		<view class="jieshuan">
			<checkbox value="cb" :checked="AllState" @click="Allchecked" /> 全选
			<view class="js_right">
				总计:<text>￥{{AllPrice}}.00</text>
				<button type="default" @click="order">去结算( <text>{{AllNum}}</text> )</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shoppingCartList: [],
				openid: "",
				token: "12",
				AllPrice: 0,
				AllState: false,
				AllNum: 0,
				list: [],
				orderform:{},
			}
		},
		methods: {
			playList() {

			},
			change(idx) {
				this.shoppingCartList[idx].num = Number(this.shoppingCartList[idx].num)
				if (this.shoppingCartList[idx].num >= 200) {
					setTimeout(() => {
						this.shoppingCartList[idx].num = 200
					}, 0)
				}
			},
			check(idx) {
				this.shoppingCartList[idx].state = !this.shoppingCartList[idx].state;
				this.isAllChecked();

			},
			isAllChecked() {
				this.list = [];
				let flog = true;
				let arr = this.shoppingCartList;
				for (let i = 0; i < arr.length; i++) {
					if (!arr[i].state) {
						flog = false;
						break
					}
				}
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].state) {
						this.list.push(arr[i].shopping_car_id);
					}
				}

				if (flog) {
					this.AllState = true;
				} else {
					this.AllState = false;
				}
				this.isAllNum();
				console.log(this.list)
			},
			Allchecked() {
				this.list = [];
				let arr = this.shoppingCartList;
				let flog = false;
				this.AllState = !this.AllState;
				if (this.AllState) {
					flog = true;
				}
				for (let i = 0; i < arr.length; i++) {
					arr[i].state = flog;
					if (arr[i].state) {
						this.list.push(arr[i].shopping_car_id);
					}
				}
				this.isAllNum();
				console.log(this.list)
			},
			isAllNum() {
				this.AllNum = 0;
				this.AllPrice = 0;
				let arr = this.shoppingCartList;
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].state) {
						this.AllNum += arr[i].num;
						this.AllPrice += Number(arr[i].price) * arr[i].num;
					}
				}
			},
			// 加
			add(idx) {
				this.shoppingCartList[idx].num += 1;
				// this.$forceUpdate()
				this.isAllNum();
				this.change(idx);
			},
			// 减
			down(idx) {
				this.shoppingCartList[idx].num -= 1;
				this.isAllNum();
				this.change(idx);
			},
			// 删除
			clear(idx) {
				console.log("删除", idx)
			},
			pay(){
				wx.requestPayment({
				            nonceStr: this.orderform.nonce_str,
				            package: 'prepay_id='+this.orderform.prepay_id,
				            paySign: this.orderform.paySign,
				            timeStamp: this.orderform.timeStamp,
				            signType: 'MD5',
				            success:res=>{
				              console.log(res);
				            },
				            fail:ress=>{
				              console.log(ress);
				            }
				          })
			},
			// 获取购物车列表
			getData() {

				wx.request({
					url: "http://api_devs.wanxikeji.cn/api/shoppingCarList",
					method: "POST",
					data: {
						token: wx.getStorageSync("token")
					},
					success: res => {
						// console.log(res.data)

						let list = res.data.data.data;

						this.shoppingCartList = list;

						this.playList();
					}
				})
			},
			order() {
				// wx.request({
				// 	url:"http://api_devs.wanxikeji.cn/api/userAddressAddModify",
				// 	method:"POST",
				// 	data:{
				// 		token: wx.getStorageSync("token"),
				// 		phone:"17398893208",
				// 		procince:"321",
				// 		city:"4564",
				// 		area:"4578",
				// 		name:"羊吃毛",
				// 		detailed:"四川省高新区",
				// 	},
				// 	success:res=>{
				// 		console.log(res.data.data[0].address_id)
				// 		wx.setStorageSync("address_id",res.data.data[0].address_id)
				// 	}
				// })
				console.log(wx.getStorageSync("token"))
				console.log(wx.getStorageSync("address_id").toString())
				console.log(this.AllPrice.toString())
				console.log(this.shoppingCartList)
				uni.request({
					url: "http://api_devs.wanxikeji.cn/api/generateOrder",
					method: "POST",
					data: {
						token: wx.getStorageSync("token"),
						address_id: wx.getStorageSync("address_id").toString(),
						money: this.AllPrice.toString(),
						shopping_car_ids: this.list
					},
					success: res => {
						console.log(res.data.data)
						this.orderform=res.data.data
						this.pay()
					}
				})
			}

		},
		mounted() {
			this.getData()
		}
	}
</script>

<style scoped>
	.box {
		background-color: #F2F2F2;
		padding-bottom: 100rpx;
	}

	.box>.item {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 50rpx 25rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.box .address {
		border-radius: 0 0 30rpx 30rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.icon-xinbaniconshangchuan- {
		margin-right: 10rpx;
	}

	.address .item_right {
		float: right;
		margin-left: 40rpx;
	}

	.shuxian {
		color: #ddd;
	}

	.shopping .item_left {
		display: inline-block;
		width: 80rpx;
		vertical-align: middle;
	}

	.shopping .item_center {
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
		vertical-align: middle;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.shopping .item_center image {
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}

	.shopping .item_right {
		display: inline-block;
		width: 400rpx;
		margin-left: 20rpx;
		vertical-align: middle;
	}

	.shopping .item_right .title {
		font-size: 28rpx;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.shopping .item_right .caoshi {
		font-size: 24rpx;
		padding: 5rpx 10rpx;
		background-color: #FC4345;
		color: #FFFFFF;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.shopping .item_right .sku {
		display: inline-block;
		font-size: 24rpx;
		color: #8C8C8C;
		background-color: #F2F2F2;
		padding: 5rpx 10rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.shopping .item_right .price {
		font-size: 24rpx;
		font-weight: 700;
		color: #F32F15;
	}

	.shopping .price text {
		font-size: 36rpx;
	}

	.shopping .item_right .priceAndNumber {
		position: relative;
	}

	.shopping .item_right .number {
		position: absolute;
		top: 0;
		right: 0;
		/* width: 200rpx; */
		height: 48rpx;
		line-height: 48rpx;
	}

	.shopping .number button,
	.shopping .number input {
		height: 48rpx;
		line-height: 48rpx;
	}

	.shopping .number button {
		width: 50rpx;
		font-size: 40rpx;
		border: 0px;
		padding: 0 10rpx;
	}

	.shopping .number input {
		display: inline-block;
		width: 80rpx;
		height: 40rpx;
		text-align: center;
		background-color: #F2F2F2;
		border-radius: 5rpx;
		font-size: 24rpx;
	}

	.jieshuan {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 25rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		z-index: 12;
	}

	.jieshuan button {
		display: inline-block;
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background-color: #F21B0C;
		vertical-align: middle;
		margin-left: 20rpx;
		color: #FFFFFF;
	}

	.jieshuan button text {
		display: inline-block;
		font-weight: 400;
	}

	.jieshuan .js_right {
		float: right;
		height: 100rpx;
		line-height: 100rpx;
	}

	.jieshuan .js_right>text {
		font-weight: 700;
	}

	.shopping .clear {
		text-align: right;
		margin-top: 20rpx;
		padding-right: 20rpx;
		font-size: 24rpx;
	}
</style>
